<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 500px;
				height: 500px;
				border: 1px solid #000;
				margin: 50px auto;
				position: relative;
			}
			/* 父相子绝 */
			.box1 {
				width: 150px;
				height: 150px;
				background-color: #f00;
				position: absolute;
				left: 0;
				right: 0;
			}
			
			.box2 {
				width: 150px;
				height: 150px;
				background-color: #ff0;
				position: absolute;
				left: 0;
				right: 0;
				z-index: -1;
			}
		
		</style>
	</head>

	<body style="height: 3000px;">
		<div class="box">
			<div class="box1">box1</div>
			<div class="box2">box2</div>
		</div>
		<!-- 
		 定位   position   开启定位 left  right  top  bottom   位置改变之后不会影响其他元素	
			元素最后停留的位置    相对定位的对象位置
		相对定位   relative;
			  相对于自身原本的位置  保留自身位置
		绝对定位   absolute  父相子绝
		     不保留原本位置  相对于有定位属性的父级,如果父级没有 继续找父级的父级 直到body
		固定定位  fixed
			不保留原本位置  相对于浏览器窗口
		吸顶定位  sticky
			居中   
				左右居中
					①
					position: absolute;
					left: 0px;
					right: 0
					margin:0 auto;
					②
					position: absolute;
					left: 50%;
					margin-left: -100px; 宽度的一半
				上下居中
					①
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto 0;
					②	
					position: absolute;
					top: 50%;
					margin-top: -100px; 高度的一半
			定位的层级 z-index   默认 0 
		 -->

	</body>
</html>